<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<script th:src="@{/js/calendar.js}" type="text/javascript" language="javascript"></script>
	<div th:include="common.html"></div>
	<style type="text/css">
		.navbar {
			height: 70px;
			background: #F45B4B;
		}
		.navbar-buttons a{
			color: white;
			padding-right: 5px;

		}
		.navbar-buttons {
			color: white;
			padding-top: 10px;
		}

        .navbar-buttons ul{ list-style:none; }
        .navbar-buttons li{display:inline-block;}

		path {
			stroke: white;
			stroke-linecap:round;
			stroke-width: 42;
			fill:none;
		}
		#sec {
			stroke: white;
			stroke-width: 20;
		}
		#min {
			stroke: white;
			stroke-width: 38;
		}
		#hour {
			stroke: white;
			stroke-width: 38;
		}
	</style>
	<meta charset="utf-8">
	<style>
		.dropbtn {
			background-color: #F45B4B;
			color: white;
			font-size: 16px;
			border: none;
			cursor: pointer;
		}

		.dropdown {
			position: relative;
			display: inline-block;
		}

		.dropdown-content {
			display: none;
			position: absolute;
			background-color: #f9f9f9;
			min-width: 160px;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		}

		.dropdown-content a {
			color: #F45B4B;
			padding: 12px 16px;
			text-decoration: none;
			display: block;
		}

		.dropdown-content a:hover {background-color: #f1f1f1}

		.dropdown:hover .dropdown-content {
			display: block;
		}

		.dropdown:hover .dropbtn {
			background-color: #F45B4B;
		}
	</style>
	<script type="text/javascript">
        function Quit() {
            if (!confirm("确定退出赤城红叶？")) {
                // window.location.href ="/springboot/login.do";
            }
            else {
                parent.location = "/";
            }
        }
	</script>
	<script>
        setInterval(function() {
            function r(el, deg) {
                el.setAttribute('transform', 'rotate('+ deg +' 500 500)')
            }
            var d = new Date()
            r(sec, 6*d.getSeconds())
            r(min, 6*d.getMinutes())
            r(hour, 30*(d.getHours()%12) + d.getMinutes()/2)
        }, 1000)
	</script>
	<script type="text/javascript">
        function  getD1(){
            var date=new Date();
            var d1=date.toLocaleString();
            var div1=document.getElementById("times");
            div1.innerHTML =d1;

        }

        setInterval("getD1();",1000);

	</script>

</head>
<!--body必须具备ace的类型，否则无效果-->
<body class="no-skin">
<div id="navbar" class="navbar navbar-default ace-save-state">
	<div class="navbar-container ace-save-state" id="navbar-container">
		<!--左侧图标和标题-->
		<div class="navbar-header pull-left" style="padding-top: 5px">
			<a href="index.html" class="navbar-brand">
				<small>
					<img th:src="@{/images/logo.png}"
						 style="width: 25px;height: 25px"/>
					赤城红叶
				</small>
			</a>
		</div>
		<div class="navbar-buttons  pull-right" role="navigation">
								<!--<span class="user-info" style="color: #ffffff;font-size: 14px">-->
<ul>

			<li>欢迎，</li>	<li th:text="${session.user.roleNames}"></li>
	<li><div class="dropdown">
		<button class="dropbtn" th:text="${session.user.name}"></button>
		<div class="dropdown-content">
			<a data-toggle="modal" data-target="#person">个人中心</a>
			<a data-toggle="modal" data-target="#repass">修改密码</a>
			<a onclick="Quit()">退出系统</a>

		</div>
	</div></li>
			<!--&lt;!&ndash;<li th:text="${session.user.name}"></li>&ndash;&gt;-->
	<!--<li><a onclick="Quit()">【退出系统】</a></li>-->

			<li>
				<!--<div id="times">-->
			<!--</div>-->
				<svg height="50" width="50" viewBox="0 0 1000 1000">
					<path d="M978,500c0,263.99-214.01,478-478,478s-478-214.01-478-478,214.01-478,478-478,478,214.01,478,478zm-888.93,237.25,20.179-11.65m779.16-449.85l22.517-13m-648.18,648.18,11.65-20.18m449.85-779.16l13-22.517m-711.75,410.93h23.305m899.7,0h26m-885.43-237.25,20.179,11.65m779.16,449.85,22.517,13m-648.18-648.18l11.652,20.183m449.85,779.16,13,22.517m-237.25-885.43v23.305m0,899.7,0,26"/>
					<path d="M500,500,500,236" id="hour"/>
					<path d="M500,500,500,120" id="min" />
					<path d="M500,500,500,90" id="sec" />
				</svg>
			</li>
</ul>
		</div>
	</div>
</div>

<div class="main-container ace-save-state" id="main-container" style="height: 630px;width: 100%">
	<div id="sidebar" class="sidebar responsive ace-save-state">

		<!-- 菜单start -->
		<div id="app">
			<ul class="nav nav-list">
				<li>
					<a href="shouye.do" target="mainFrame">
						<i class="menu-icon fa fa-tachometer"></i>
						<span class="menu-text"> 首页</span>
					</a>
					<b class="arrow"></b>
				</li>

                <li v-for="value in menu.children" >
                    <a href="#" class="dropdown-toggle">
                        <!--<i>-->
                        <!--<img :src="'images/'+value.image"-->
                        <!--style="height: 20px;width: 20px;margin-right: 5px;margin-left: 5px">-->
                        <!--</i>-->
                        <i :class="value.image"></i>
                        <span class="menu-text">
								{{value.name}}
							</span>
						<i class="arrow fa fa-angle-down ace-save-state" data-icon1="arrow fa fa-angle-left" data-icon2="arrow fa fa-angle-top"></i>
                        <!---->
                    </a>
                    <b class="arrow"></b>
                    <ul class="submenu" v-for="item in value.children">
                        <li>
                            <a :href=item.url  target="mainFrame" :class="item.image" style="height: 30px;font-size: 13px">
                                <!--<i class="menu-icon fa fa-caret-right"></i>-->
                                <!--<i :class="item.image"></i>-->
                                {{item.name}}
                            </a>
                            <b class="arrow"></b>
                        </li>
                    </ul>
                </li>

			</ul>
			<!-- 菜单end -->
		</div>
        <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
            <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
        </div>
	</div>

	<!-- 页面显示区域 -->
	<div class="main-content" id="mainPage" style="height: 100%;">
	</div>

</div>

<!-- 注册窗口 -->
<div id="repass" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<button class="close" data-dismiss="modal">
					<span>×</span>
				</button>
			</div>
			<div class="modal-title">
				<h1 class="text-center">修改密码</h1>
			</div>
			<div class="modal-body">
				<form action="user/repass.do" method="post">
					<div class="form-group">
						<label>修改密码</label>
						<input class="form-control" type="password" name="repass" v-model="repass" placeholder="请输入修改密码！" required
							   oninvalid="setCustomValidity('修改密码不能为空！')" oninput="setCustomValidity('')"
							   onfocus="this.value = '';"
							   onblur="if (this.placeholder == '') {this.placeholder = '******';}">
					</div>
					<div class="text-right">
						<button class="btn btn-primary" type="submit">提交</button>
						<button class="btn btn-danger" data-dismiss="modal">取消</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<!-- 注册窗口 -->
<div id="person" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<button class="close" data-dismiss="modal">
					<span>×</span>
				</button>
			</div>
			<div class="modal-title">
				<h1 class="text-center">个人中心</h1>
			</div>
			<div class="modal-body">
				<form action="person/person.do" method="post">
					<div class="form-group">
						<label>姓名</label>
						<input class="form-control" type="text" name="name" th:value="${session.user.name}">
					</div>
					<div class="form-group">
						<label>性别</label>
						<input class="form-control" type="text" name="sex" th:value="${session.person.sex}">
					</div>
					<div class="form-group">
						<label>出生年月</label>
						<input class="form-control" type="text" name="birth" th:value="${session.person.birth}" id="txtDate" onclick="SetDate(this,'yyyy-MM-dd')" readonly="readonly" />
					</div>
					<div class="form-group">
						<label>电话号码</label>
						<input class="form-control" type="text" name="phone" th:value="${session.person.phone}">
					</div>	<div class="form-group">
						<label>爱好</label>
						<input class="form-control" type="text" name="habby" th:value="${session.person.habby}">
					</div>
					<div class="text-right">
						<button class="btn btn-primary" type="submit">提交</button>
						<button class="btn btn-danger" data-dismiss="modal">取消</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
</body>
<script th:src="@{/myjs/index.js}"></script>
<script>
    $("#mainPage").append( "<iframe id='mainFrame' name='mainFrame' src='/shouye.do' style='overflow:visible;' " +
		"scrolling='yes' frameborder='no' width='100%' height='100%; float:left'/>");
</script>
</html>
